import { ElementDSL } from '../ElementDSL'
import { type Ref } from 'vue'
import { ElInput } from 'element-plus'
import type {
  InputType,
  SizeType,
  ComponentConfig,
  OffOnType,
  ResizeType,
  InputEventType,
  ModelValueType,
} from '../DslType'

export default class Input extends ElementDSL {
  constructor() {
    super(ElInput)
  }

  type(value: InputType): this {
    return super.setProps('type', value)
  }

  modelValue(value: any): this {
    return super.setProps('model-value', value)
  }

  maxlength(value: number | string): this {
    return super.setProps('maxlength', value)
  }
  minlength(value: number | string): this {
    return super.setProps('minlength', value)
  }
  /**
   * 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效
   * @param value
   * @returns
   */
  showWordLimit(value: boolean): this {
    return super.setProps('show-word-limit', value)
  }

  placeholder(value: string): this {
    return super.setProps('placeholder', value)
  }
  /**
   * 是否显示清除按钮，只有当 type 不是 textarea时生效
   * @param value
   * @returns
   */
  clearable(value: boolean): this {
    return super.setProps('clearable', value)
  }
  /**
   * 指定输入值的格式。(只有当 type 是"text"时才能工作)
   * @param value
   * @returns
   */
  formatter(value: (value: string) => string): this {
    return super.setProps('formatter', value)
  }
  /**
   * 指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)
   * @param value
   * @returns
   */
  parser(value: (value: string) => string): this {
    return super.setProps('parser', value)
  }
  /**
   * 是否显示切换密码图标
   * @param value
   * @returns
   */
  showPassword(value: boolean): this {
    return super.setProps('show-password', value)
  }
  /**是否禁用 */
  disabled(value: boolean): this {
    return super.setProps('disabled', value)
  }
  /**输入框尺寸，只在 type 不为 'textarea' 时有效 */
  size(value: SizeType): this {
    return super.setProps('size', value)
  }
  /**
   * 输入框尾部图标
   * @param value
   * @returns
   */
  suffixIcon(value: string | ComponentConfig): this {
    return super.setProps('suffix-icon', value)
  }
  /**
   * 输入框头部图标
   * @param value
   * @returns
   */
  prefixIcon(value: string | ComponentConfig): this {
    return super.setProps('prefix-icon', value)
  }
  /**
   * 输入框行数，只对 type="textarea" 有效
   * @param value
   * @returns
   */
  rows(value: number): this {
    return super.setProps('rows', value)
  }
  /**
   * 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
   * @param value
   * @returns
   */
  autosize(value: { minRows: number; maxRows: number }): this {
    return super.setProps('autosize', value)
  }
  /**
   * 原生的自动完成功能，可选值为 off 或 on
   * @param value
   * @returns
   **/
  autocomplete(value: OffOnType): this {
    return super.setProps('autocomplete', value)
  }
  /**
   * 等价于原生 input name 属性
   * @param value
   * */
  name(value: string): this {
    return super.setProps('name', value)
  }
  /**
   * 原生 readonly 属性，是否只读
   * @param value
   * */
  readonly(value: boolean): this {
    return super.setProps('readonly', value)
  }
  /**原生 max 属性，设置最大值 */
  max(value: number): this {
    return super.setProps('max', value)
  }
  /**原生 min 属性，设置最小值 */
  min(value: number): this {
    return super.setProps('min', value)
  }
  /**原生 step 属性，设置输入字段的合法数字间隔 */
  step(value: number): this {
    return super.setProps('step', value)
  }
  /**控制是否能被用户缩放 */
  resize(value: ResizeType): this {
    return super.setProps('resize', value)
  }
  /**原生 autofocus 属性，自动获取焦点 */
  autofocus(value: boolean): this {
    return super.setProps('autofocus', value)
  }
  /**原生 form 属性，指定原生的 form 组件的 id */
  form(value: string): this {
    return super.setProps('form', value)
  }
  /**等价于原生 input aria-label 属性 */
  ariaLabe(value: string): this {
    return super.setProps('aria-label', value)
  }
  /**原生 tabindex 属性，设置输入框的 tab 键索引 */
  tabindex(value: number): this {
    return super.setProps('tabindex', value)
  }
  /**
   * 输入时是否触发表单的校验
   * 默认：true
   */
  validateEvent(value: boolean): this {
    return super.setProps('validate-event', value)
  }
  /**
   * input 元素或 textarea 元素的 style
   * value: CSSProperties | CSSProperties[] | string[]
   */
  inputStyle(value: string | object): this {
    return super.setProps('wrap', value)
  }
  /**原生 inputmode 属性，设置输入框的输入模式 */
  inputmode(value: string): this {
    return super.setProps('inputmode', value)
  }

  /**
   *
   *
   * @param eventName
   * @param handler
   * @returns
   */
  on(eventName: InputEventType, handler: (...args: any[]) => void): this {
    return super.on(eventName, handler)
  }
  /**插槽 */
  slot(name: 'prefix' | 'suffix' | 'prepend' | 'append', content: string): this {
    return super.setSlot(name, content)
  }
}
